<template>
    <div class="visitor">
        <div class="section-wrap">
            <div class="form-section">
                <div class="form-item form-item-style1 form-break">
                    <div class="label-title">
                        <label>单位名称</label>
                    </div>
                    <div class="label-container">
                        <!-- <input type="text"
                                disabled
                                class="longinp"
                               v-model="params.EntryName"> -->
                        <div class="label-div"><a href="javascript:;"><em>{{params.EntryName|unescape}}</em></a></div>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>姓名</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <input type="text"
                                placeholder="请输入姓名"
                               v-model="params.UserName">
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>联系方式</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <input type="text"
                                placeholder="请输入手机号"
                               v-model="params.ContactInformation">
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>身份证号</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <input type="text"
                                placeholder="请输入身份证号"
                               v-model="params.UserIDNumber">
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>来访单位</label>
                    </div>
                    <div>
                        <input type="text"
                                class="longinp"
                                placeholder="请填写来访单位"
                               v-model="params.VisitinUnit">
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>访问日期</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <group>
                        <datetime v-model="params.AccessTime" format="YYYY-MM-DD HH:mm" @on-change="changeTime"></datetime>
                    </group>
                </div>  
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>访问事由</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <input type="text"
                                class="longinp"
                                placeholder="请填写访问事由"
                               v-model="params.Cause">
                    </div>
                    <!-- <group>
                        <popup-picker :data="list1"
                                      v-model="recorderman"
                                      placeholder="请选择"
                                      @on-change="selectPerson"></popup-picker>
                    </group> -->
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>体温状态</label>
                        <!-- <i class="iconfont icon-required"></i> -->
                    </div>
                    <group>
                        <x-switch :title="title1 = params.Temperature ? '正常':'异常'" v-model="params.Temperature" :disabled="isDisable"></x-switch>
                    </group>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>备注</label>
                    </div>
                    <div>
                        <textarea class="areainfo" 
                                height="300"
                                placeholder="点击输入备注"
                                v-model="params.Remarks"
                                :disabled="isDisable"></textarea>
                    </div>
                </div>  
            </div>
            <div class="form-section">
                <div class="form-item form-item-style2">
                    <div class="label-title space-between">
                        <label>附件</label>
                        <span>当前共上传{{uploadLength}}个附件</span>
                    </div>
                    <div class="upload-wrap">
                        <upload @setFormData="setFormData" limitNumber="5"></upload>
                        <!-- <strong v-else
                                class="no-img">暂无图片</strong> -->
                    </div>
                </div>
            </div>
            <div class="btns">
                <button class="blue"
                        @click="toSubmit">提交</button>
            </div>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import { XSwitch, Group, Cell } from 'vux'
import upload from '@/commonComponents/upload/index'
import http from '../../../axios/public'
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        XSwitch,
        upload,
        myMenu
    },
    data() {
        return {
            userInfo: {},
            params: {
                Temperature: true,
                AccessTime: this.getdatenew(),
            },
            list1: [['办公', '开会', '其他']],//访问事由
            isDisable: false,
            isOnff: true,
            title1: '正常',
            addFlag: true,// 提交开关（避免多次提交）          
            formData: new FormData(),
            images: [],
            uploadLength: 0, // 图片上传个数
        }
    },
    created() {
        // this.params.FktzId="1aaaaaa11"
        //获取用户信息，判断是否有操作权限
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        if(this.userInfo){
            this.params.EntryName = this.userInfo.departName
            this.params.deptid = this.userInfo.departId
        }
        
    },
    methods: {
        //获取当前日期、时间
        getdatenew() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minute >= 0 && minute <= 9) {
                minute = "0" + minute;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate + ' ' + hour + ':' + minute;
            return currentdate;
        },
        preview (filePath) {
            if (this.regImg.test(filePath)) {
                this.$router.push({
                    path: '/previewImg',
                    query: {
                        previewImg: filePath
                    }
                })
            } else {
                wx.miniProgram.navigateTo({
                    url: `/pages/openDocument/index?filePath=${filePath}`
                })
            }
        },
        setFormData (formData, uploadLength, images) {
            this.formData = formData
            this.uploadLength = uploadLength
            this.images = images
        },
        // 提交
        toSubmit () {
            // let phoneNum =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
            // 校验手机号码
            let mobileReg = /(^0\d{2,3}\-\d{7,8}$)|(^1[3|4|5|6|7|8][0-9]{9}$)/
            let idNum = /^\d{15}|\d{18}$/
            if (!this.params.UserName) {
                this.$vux.toast.text('请输入姓名');
                return false; 
            }
            if (!this.params.ContactInformation) {
                this.$vux.toast.text('请输入手机号');
                return false; 
            }else{
                if(!mobileReg.test(this.params.ContactInformation)){
                    this.$vux.toast.text('请输入正确的联系电话');
                    return false;
                }
            }
            if (!this.params.UserIDNumber) {
                this.$vux.toast.text('请输入身份证号');
                return false; 
            }else{
                if(!idNum.test(this.params.UserIDNumber)){
                    this.$vux.toast.text('请正确输入身份证号');
                    return false;
                }
            }
            if (!this.params.AccessTime) {
                this.$vux.toast.text('请选择访问日期');
                return false; 
            }
             if (!this.params.Cause) {
                this.$vux.toast.text('请输入访问事由');
                return false; 
            }
            // if(!this.params.UserName || !this.params.ContactInformation || !this.params.AccessTime || !this.params.UserIDNumber || !this.params.Cause){
            //     this.$vux.toast.text('请完善相关信息')
            //     return false
            // }
            if (!this.addFlag) {
                return false
            }
            this.addFlag = false
            this.$vux.loading.show({
                text: '正在提交中，请耐心等待...'
            })
            http.fetchPostFormData('/api/Fktz/FztzAdd',this.params, this.formData)
            .then((res) => {
                if (res.data.code === 0) {
                    this.$vux.loading.hide()
                    this.$vux.toast.text('访客登记成功')
                    setTimeout(() => {
                        this.$router.go(-1)
                        // wx.miniProgram.navigateBack()
                    }, 1000)
                }else{
                     this.$vux.toast.text(res.data.info)
                     this.addFlag = true
                }
            }).catch((error) => {
                if(error.message.includes('timeout')){   // 判断请求异常信息中是否含有超时timeout字符串
                    console.log('错误回调',error);
                    this.$vux.toast.text('请求超时，请稍后再试')
                }
                this.addFlag = true
            }).finally(() => {
                this.$vux.loading.hide()
            })
          
        },
        selectPerson() {
            let param = {
                allowPaging: true,
                data: {
                }
            }
        },
        changeTime() {
            
        }
    }
}
</script>
<style scoped>

</style>
<style lang="less">
.visitor{
    .longinp{
        width: 250px;
    }
    .areainfo{
        color: #666;
    }
}
.form-item-style1.form-break{
    height: auto;
    line-height: auto;
}
.label-container a{display:inline-block;text-align:center}
.label-div{
    width: 250px;
    font-size: 14px;
    text-align: right;
    word-break: break-all;
    line-height: 20px;
}
.label-div em{
    position:relative;
    font-style:normal;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color: #999;
}
</style>